/**
 * Created by angel on 2016/12/26.
 */
//滚轮滚动时 头部颜色渐变


window.onload = function () {
    banners();
    downTime();
}

//获取元素
var header = document.querySelector('.header-box');
var banner = document.querySelector('.banner');
var bannerHeight = banner.offsetHeight;
window.onscroll = function () {
    var top = document.body.scrollTop;
    var opacity = 0;
    if (top > bannerHeight) {
        opacity = 0.85;
        header.style.background = "rgba(201, 21, 35," + opacity + ")";
    } else {
        opacity = 0.85 * (top / bannerHeight);
        header.style.background = "rgba(201, 21, 35," + opacity + ")";
    }
}

//轮播图
//让轮播图自动滚动
function banners() {
    //获取元素
    var banner = document.querySelector('.banner');
    var width = banner.offsetWidth;
    var imageBox = banner.querySelector('ul:first-child');
    var pointBox = banner.querySelector('ul:last-child');
    var points = pointBox.querySelectorAll('li');//所有的圆圈

    var addTransition = function () {
        imageBox.style.transition = 'all .2s';
        imageBox.style.webkitTransition = 'all .2s';
    }
    var removeTransition = function () {
        imageBox.style.transition = 'none';
        imageBox.style.webkitTransition = 'none';
    }
    var setTranslateX = function (x) {
        imageBox.style.transform = 'translateX(' + x + 'px)';
        imageBox.style.webkitTransform = 'translateX(' + x + 'px)';
    }
    var index = 1;
    /*    console.log(index);
     console.log(width);*/

    var timer = setInterval(function () {
        index++;
        addTransition();//过渡效果
        setTranslateX(-index * width);//轮播图自动播放 一秒播放一个页面
    }, 1000);
    //当过渡完后，添加监听事件
    imageBox.addEventListener("webkitTransitionEnd", function () {
        if (index >= 9) { //如果播放到最后一张，瞬间跳到第一张
            index = 1;
            removeTransition();//移除过渡 瞬间跳到第一张不需要过渡效果
            setTranslateX(-index * width);//设置定位
        } else if (index <= 0) {//如果是第一张，瞬间跳到最后一张
            index = 8;
            removeTransition();//移除过渡 瞬间跳到最后一张不需要过渡效果
            setTranslateX(-index * width);//设置定位
        }
        //小圆圈
        for (var i = 0; i < points.length; i++) {
            points[i].className = "";
        }
        points[index - 1].className = "now";
    });
    //鼠标按下事件 让图片跟着鼠标走
    var startX = 0;
    var moveX = 0;
    var distanceX = 0;
    var isMove = false;
    window.addEventListener("touchstart", function (e) {
        startX = e.touches[0].clientX;
        clearInterval(timer);
    });
    window.addEventListener("touchmove", function (e) {
        isMove = true;
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        addTransition();
        setTranslateX(-index * width + distanceX);
    });
    window.addEventListener("touchend", function () {
        if ((Math.abs(distanceX) > width / 3) && isMove) {
            if (distanceX > 0) {
                index--;
            } else {
                index++;
            }
            addTransition();
            setTranslateX(-index * width);
        } else {
            addTransition();
            setTranslateX(-index * width);
        }
        //参数重置，重新启用定时器
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;
        timer = setInterval(function () {
            index++;
            addTransition();
            setTranslateX(-index * width);
        }, 1000);
    });
}

//倒计时
function downTime() {
    var time = 5 * 60 * 60;
    var killTime = document.querySelector('.kill-time');
    var spans = killTime.querySelectorAll('span');
    var timer = setInterval(function () {
        time--;
        if (time < 0) {
            clearInterval(timer);
            return false;
        }
        var h = Math.floor(time / 3600);
        var m = Math.floor((time % 3600) / 60);
        var s = time % 60;
        spans[0].innerHTML = Math.floor(h / 10);
        spans[1].innerHTML = h % 10;

        spans[3].innerHTML = Math.floor(m / 10);
        spans[4].innerHTML = m % 10;

        spans[6].innerHTML = Math.floor(s / 10);
        spans[7].innerHTML = s % 10;

    }, 1000);
}


